import React from 'react';
import * as actionCreators from '../action_creators';
import {connect} from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import {FolderTreeContainer} from "./FolderTree";
import FolderStore from "../stores/FolderStore";
import {Link} from 'react-router';   
var SmartFolderItem = React.createClass({
    removeSmartFolder: function(event){
        window.removeSmartFolder(this.props.data);
        event.stopPropagation(); 
    },
    search: function(){          
        this.props.history.pushState(this.props.data, "/search");
    },
    render: function(){
        var smartFolder = this.props.data;
        return (<li onClick={this.search}>
                    <a href="javascript:void(0)"><i className="fa fa-search"></i>{smartFolder.title}<i onClick={this.removeSmartFolder} className="fa fa-times pull-right"></i></a>                                           
                </li>)
    }
})

var SmartFolderPanel = React.createClass({      
    render: function(){
        var _this = this;
        var smartFolderItem = _.map(this.props.data, function(smartFolder, index) {
                                return (<SmartFolderItem data={smartFolder} key={index} history={_this.props.history} />)
                            })
        return (<ul className="nav nav-pills nav-stacked labels-info">
                    {smartFolderItem}
                </ul>);
    }
});

export const LeftSide = React.createClass({
    mixins: [PureRenderMixin],
    getInitialState: function () {
        return {          
            smartFolderList: [],
            permission: 'cmis:reader'
        };
    },
    smartFolderListChanged: function(event, smartFolder){   
        var _this = this;
        // FolderStore.getSmartFolderList().done(function(_smartFolderList){
        //     _this.setState({smartFolderList: _smartFolderList});              
        // })      
          
    },
    folderTreeChanged: function(){
        var _this = this;
        FolderStore.getFolderTree().done(function(data) {
            _this.setState({
                folderTree: data
            });             
        });
    },
    componentDidMount: function(){
        var _this = this;
        $("#tree-nav").collapse('show');            
        $(this.refs.folder_file).attr("multiple", "").attr("webkitdirectory", "");

        FolderStore.folderTreeChanged(this.folderTreeChanged);
        FolderStore.smartFolderListChanged(this.smartFolderListChanged)
        FolderStore.permissonChanged(this.permissonChanged);   
        //FolderStore.folderTreeChanged();
       // FolderStore.smartFolderListChanged();
    },
    componentWillUnmount: function(){
        FolderStore.folderTreeChanged(this.folderTreeChanged, false);
        FolderStore.smartFolderListChanged(this.smartFolderListChanged, false)
        FolderStore.permissonChanged(this.permissonChanged, false);
    },

    permissonChanged: function(event, data){
        this.setState({permission: data});
    },
    createFolder: function(){
        window.createFolder(FolderStore.getCurFolder());
    },
    uploadDocument: function() {
        window.uploadDocument(FolderStore.getCurFolder());
    },       
    gotoRoot: function(){
        $('#document-navigation').trigger("clickNode", window.rootFolder);
    },
    selectFile: function(){           
        window.uploadFiles(this.refs.folder_file.files, FolderStore.getCurFolder().id);            
        this.refs.folder_form.reset();
    },
    dropdownMenu: function(){
        $("#dropdownMenu1").dropdown("toggle");
    },
    onClickTreeNode: function(treeNode){
        this.props.setCurFolderId(treeNode.get("id"));       
    },
    render: function () {       
        var uploadFolderItem;
        var dividerItem;
        if ($.browser.webkit ){
            dividerItem = (<li className="divider"></li>);
            uploadFolderItem = (
                <li style={{position:'relative'}} onClick={this.uploadFolder}>
                    <a href="javascript:void(0)">
                        <i className="fa fa-arrow-up"></i>{i18n.t("Upload folder")}
                        <form ref="folder_form" action="javascript:void(0)" style={{position:'absolute',opacity:0,top:0,left:0,width:'100%',height:'100%'}}>
                            <input ref="folder_file" title="点击选择文件" onChange={this.selectFile} id="h5Input1" accept="*/*" type="file" name="html5uploader" style={{position:'absolute',opacity:0,top:0,left:0,width:'100%',height:'100%',cursor:'pointer'}}/>
                        </form>
                    </a>
                </li>)
        }

        var permission = this.state.permission == "cmis:write" || this.state.permission == "cmis:all";
        var tooltip = "";
        if (!permission){
            tooltip = i18n.t("You are not authorized, operation is not allowed");
        }
        return (            
            <div className="navpane_inner_wrap">
               <div className="ba-col-l font-si16">
                   <i className="fa fa-list-ul"></i>
                   <span className="m-left10">{i18n.t("Update subscription")}</span>
               </div>
               <div className="panel-body">
                    <div className="dropdown dl-horizontal">                            
                        <a className={classNames({disabled: !permission}, "btn btn-create-fold dropdown-toggle")} id="dropdownMenu1" data-toggle="dropdown" title={tooltip} style={{pointerEvents:'all'}}>
                         {i18n.t("NEW")}
                        </a>                          
                        <ul className="dropdown-menu width-100" aria-labelledby="dropdownMenu1">
                            <li onClick={this.createFolder}>
                                <a><i className="fa fa-folder-open"></i>
                                       {i18n.t("New folder")}
                                </a>
                            </li>
                            <li className="divider"></li>
                            <li onClick={this.uploadDocument}>
                                <a>
                                    <i className="fa fa-arrow-up"></i>
                                    {i18n.t("Upload file")}
                                </a>
                            </li>
                            <li className="divider"></li>
                            {uploadFolderItem}  
                            {dividerItem}                                
                            <li onClick={window.noFinished}>
                                <a><i className="fa fa-print"></i>
                                    {i18n.t("Create file from scanner")}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div className="tree-box">
                        <div className="tree-wrap">
                            <div className="panel-body">
                                <div className="attr-box">
                                    <div id="main-nav">
                                        <div className="border-bot">
                                            <div className="">
                                                <h5 className="p-lef-rig">
                                                    <a href="javascript:void(0)">
                                                        <i className="fa fa-caret color accordion-toggle collapsed" href="#tree-nav" data-parent="#accordion" data-toggle="collapse"  aria-expanded="false"></i>
                                                        <span onClick={this.gotoRoot} className="color">
                                                              {i18n.t("My archives")}
                                                        </span>
                                                    </a>
                                                </h5>
                                            </div>
                                            <div className="panel-collapse collapsed" id="tree-nav" aria-expanded="false" style={{height: '0px'}}>
                                                <div className="panel-body">
                                                    <div className="tree-frist">
                                                        <Link className="file_btu" to="/fill" >
                                                            <i className="fa fa-folder"></i>
                                                            {i18n.t("Waiting archive")}
                                                        </Link>
                                                    </div>
                                                    <div id="document-navigation">
                                                        <FolderTreeContainer option = {{
                                                                style: 'tree-solid-line',
                                                                editable: true
                                                            }}
                                                            onClickNode={this.onClickTreeNode}></FolderTreeContainer>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="border-bot">
                                            <div className="">
                                                <h5 className="p-lef-rig">
                                                    <a href="#ntelligent-folder" data-parent="#accordion" data-toggle="collapse" className="accordion-toggle collapsed" aria-expanded="false">
                                                        <i className="fa fa-caret color"></i>
                                                                <span className="color">
                                                                    {i18n.t("Smart folder")}
                                                                </span>
                                                    </a>
                                                </h5>
                                            </div>
                                            <div className="panel-collapse collapse" id="ntelligent-folder" aria-expanded="false" style={{height:'0px'}}>
                                                <div className="panel-body">
                                                    <SmartFolderPanel data={this.state.smartFolderList} history={this.props.history}/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>           
        )

    }
});   

function mapStateToProps(state) {
  return {    
  };
}

export const LeftSideContainer = connect(
  mapStateToProps,
  actionCreators
)(LeftSide);